<?php
include_once '../fn.php';
loginCheck();
$flag = 'post-add';

?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Add new post &laquo; Admin</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <script src="../assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
    <script>
        NProgress.start()
    </script>

    <div class="main">
        <nav class="navbar">
            <button class="btn btn-default navbar-btn fa fa-bars"></button>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
                <li><a href="login.php"><i class="fa fa-sign-out"></i>退出</a></li>
            </ul>
        </nav>
        <div class="container-fluid">
            <div class="page-title">
                <h1>写文章</h1>
            </div>
            <!-- 有错误信息时展示 -->
            <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
            <form class="row" action="./posts/postsAdd.php" method="POST" enctype="multipart/form-data">
                <div class="col-md-9">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea id="content" class="form-control input-lg hide" name="content" cols="30" rows="10" placeholder="内容"></textarea>
                        <!-- 富文本编辑器父容器 -->
                        <div id="content-box"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="slug">别名</label>
                        <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
                        <p class="help-block">https://zce.me/post/<strong id="strong">slug</strong></p>
                    </div>
                    <div class="form-group">
                        <label for="feature">特色图像</label>
                        <!-- show when image chose -->
                        <img class="help-block thumbnail" style="display: none">
                        <input id="feature" class="form-control" name="feature" type="file" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="category">所属分类</label>
<!----------------------------------- 模版引擎施工中-------------------------------------------- -->
                        <!-- <select id="category" class="form-control" name="category">
                            <option value="1">未分类</option>
                            <option value="2">潮生活</option>
                        </select> -->
                        <select id="category" class="form-control" name="category">

                        <script type="text/html" id="tmp-cate">
                            {{ each list v i }}
                            <option value="{{ v.id }}" slug=" {{ v.slug }} ">{{ v.name }}</option>
                            {{ /each }}
                        </script>

                        </select>
<!------------------------------------------------------------------------------------ -->
                    </div>
                    <div class="form-group">
                        <label for="created">发布时间</label>
                        <input id="created" class="form-control" name="created" type="datetime-local">
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select id="status" class="form-control" name="status">
<!----------------------------------- 模版引擎施工中-------------------------------------------- -->
                            <!-- <option value="drafted">草稿</option>
                            <option value="published">已发布</option> -->
                        <script type="text/html" id="tmp-state">
                            {{ each $data v k }}
                            <option value="{{ k }}">{{ v }}</option>
                            {{ /each }}
                        </script>
<!---------------------------------------------------------------------------------------------- -->

                        </select>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="submit">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 引入公共侧边栏 -->
    <?php include './inc/aside.php'; ?>

    <script src="../assets/vendors/jquery/jquery.js"></script>
    <script src="../assets/vendors/bootstrap/js/bootstrap.js"></script>
    <script>
        NProgress.done()
    </script>
    <!-- 导入模板引擎 -->
    <script src="../assets/vendors/template/template-web.js"></script>
    <!-- 导入分页插件相关文件 -->
    <script src="../other/pagination/jquery.pagination.js"></script>
    <link href="../other/pagination/pagination.css" rel="stylesheet" type="text/css" />
    <!-- 导入moment插件--格式化时间日期 -->
    <script src="../assets/vendors/moment/moment.min.js"></script>
    <!-- 引入富文本编辑器插件 -->
    <script src="../assets/vendors/wangEditor/wangEditor.js"></script>

    <script>
        // 动态渲染分类下拉菜单
        // 封装成一个函数
        function setCategories() {
            $.ajax({
                url: './posts-add/postsAddGetCategories.php',
                dataType: 'json',
                success: function (info) {
                    console.log(info);

                    // 后台成功返回分类数据后，利用模版引擎构造
                    var obj = {
                        list: info
                    }

                    var str = template('tmp-cate', obj);
                    $('#category').html(str);
                }
            })
        }

        setCategories();

        // --------------------------------------------------------------------
        // 文章的状态在数据库中没有单独的表存储，但是可以自己定义一个文章的状态对象来填充html结构
        var state = {
            drafted: '草稿',
            published: '已发布',
            trashed: '回收站',
        }

        // 封装设置可选文章状态函数
        // 模版引擎中 $data指向传进去对象的本身，固定用法
        function setPostsState() {
            var obj = state;
            var str = template('tmp-state',obj);

            $('#status').html(str);
        }

        setPostsState();

        // -------------------------------------------------------------------------
        // 别名同步功能的实现
        // 用到h5中新增事件
        //  注册h5新事件用on注册，jquery中还没封装input方法
        $('#slug').on('input',function () {
            $('#strong').html($(this).val() || 'slug');
        })

        // -------------------------------------------------------------------------
        // 设置文件域的格式
        // <input name="feature" type="file" accept="image/* video/*">
        // accept="大类型/小类型"  * 是通配符，匹配任意类型
        // 只是简单的屏蔽(根据后缀名)，主要还是需要后台去验证

        // -------------------------------------------------------------------------
        // 图片的本地预览功能实现
        // <input type="file" multiple> -----可以上传多个文件

        // 1.监听文件域的表单是否选中文件
        $('#feature').on('change',function () {
            // 2.获取文件域中选中的文件，用files属性
            // $(this).prop('files') 是个个伪数组 原生js写法： this.files
            var file = $(this).prop('files')[0];
            console.log(file);

            if (file) {
                // 通过文件对象，得到文件url地址
                var url = URL.createObjectURL(file);
                // 把地址赋值给img的src
                $('.thumbnail').prop('src',url).css('display','block');
            }else {
                $('.thumbnail').prop('src','').css('display','none');
            }
        })

        // ----------------------------------------------------------------------------
        // 发布时间标签的规范化
        // <input type="datetime-local"> 这个标签的 value值的格式如下
        // 利用chrome的选择这个元素 然后在控制台 $0.value 获取的(毕竟有些标签的value并不会直接显示出来)
        // 时间格式 "2020-02-28T02:05"

        // 原生利用 var date = new Date()获取当前时间
        // 然后用 date.getXXX 获取年月日，然后手动规范为上面的时间格式，然后赋给value以改变标签的显示

        // 也可以利用，moment 插件规范时间
        // 语法格式 moment(时间).format(格式)
        // 格式(令牌的使用)详解在http://momentjs.cn/docs/#/displaying/
        // 这里用的格式: YYYY 年 MM月 DD日 HH小时 mm分钟 ss秒

        // 如果不传时间，moment()方法默认取当前时间进行转换

        // var date = new Date();
        // console.log(moment().format('YYYY-MM-DDTHH:ss'));
        $('#created').val(moment().format('YYYY-MM-DDTHH:mm'));

        // ----------------------------------------------------------------------------
        // 富文本编辑器初始化

        var E = window.wangEditor;
        var editor = new E('#content-box');
        // 或者 var editor = new E( document.getElementById('editor') )

        // 同步textarea 和 富文本编辑器
        var $text = $('#content');
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text.val(html);
            // console.log($text.val());  //已经能成功获取
        };

        // 配置富文本编辑器的菜单
            // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]

        editor.create();

        
        

    </script>
</body>

</html>